<template>
    <div class="box-column container-grid">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
                <template v-slot:facethumb="{ row }">
                    <el-image style="width: 70px; height: 40px" :src="row.face_thumb" fit="contain" v-if="row.face_thumb !== ''" :preview-src-list="[row.face_thumb]"></el-image>
                </template>
                <template v-slot:userXm="{ row }">
                    <template v-if="park.oa_id === 2">{{ row.oa_userid ? '钉-' : '' }} </template>
                    <template v-else-if="park.oa_id === 1">{{ row.oa_userid ? '微-' : '' }} </template>
                    {{ row.user_xm }}
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
        <dialogAuth ref="dialogAuth" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogAuth>
        <repwdForm ref="repwdForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></repwdForm>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, State, Getter } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import dialogForm from './Edit.vue';
import dialogAuth from './Auth.vue';
import repwdForm from './RePwd.vue';
@Component({
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm,
        dialogAuth,
        repwdForm
    }
})
export default class purviewStaffTable extends Vue {
    @Action('purviewStaff/del') itemDel: any;
    @Action('purviewStaff/list') getList: any;
    @State((state) => state.sharing.staffLoginData) staffLoginData: any;
    @State((state) => state.sharing.func) funcData: any;
    @Getter("sharing/park") park: any;
    table: any = {
        btns: [
            {
                label: '编辑',
                condition: ['permissionsData.edit'],
                handleClick: (this as any).onEditClick
            },
            {
                label: '删除',
                condition: ['permissionsData.del'],
                handleClick: (this as any).onDelClick
            },
            {
                label: '角色',
                condition: ['permissionsData.role'],
                param: 'dialogAuth',
                handleClick: (this as any).onEditClick
            },
            {
                label: '重置密码',
                condition: ['permissionsData.repwd'],
                param: 'repwdForm',
                handleClick: (this as any).onEditClick
            }
        ],
        // 列配置
        columns: [
            {
                fixed: 'left',
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                fixed: 'left',
                title: '帐号',
                field: 'phone'
            },
            {
                fixed: 'left',
                title: '姓名',
                field: 'user_xm',
                slots: { default: 'userXm' }
            },
            {
                title: '性别',
                field: 'user_xb',
                params: 'sexData',
                formatter: (this as any).formatterData
            },
            {
                title: '岗位名称',
                field: 'staff_post'
            },
            {
                title: '后台登录',
                field: 'pc_login',
                params: 'staffLoginData',
                formatter: (this as any).formatterData
            },
            {
                title: 'app登录',
                field: 'app_login',
                params: 'staffLoginData',
                formatter: (this as any).formatterData
            },
            {
                width: 150,
                title: '创建时间',
                field: 'created_at'
            },
            {
                slots: { default: 'operate' },
                title: '操作',
                showOverflow: "ellipsis",
                fixed: 'right',
                width: 240
            }
        ]
    };

    @State((state) => state.sharing.sex) sexData: any;
        // 查询头下拉数据配置
        headerSelectList: any = [
        {
            dataName: 'sexData',
            keyName: 'user_xb'
        }
    ];
    // 查询头配置
    enquiryData: any = {
        searchBtn: {
           // condition: ['permissionsData.query']
        },
        fields: [
            {
                field: 'user_xm',
                label: '姓名'
            },
            {
                field: 'user_xb',
                fieldType: 'select',
                label: '性别'
            }
        ],
        btns: [
            {
                label: '新增',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: ['permissionsData.add'],
                handleClick: (this as any).onAddClick
            }
        ]
    };

    @Action('parkTenantCard/del') confirmAction: any;
}
</script>
